<template>
  <cl-page status-bar-background="#2b2e3d">
    <view class="contract-list">
      <view class="contract-item" v-for="item in list" :key="item.id">
        <view class="contract-info">
          <view class="label">客服名称</view>
          <view class="txt">{{ item.name }}</view>
        </view>
        <view class="contract-info">
          <view class="label">客服二维码</view>
          <view class="image-wrapper">
            <image class="image" :src="item.qrCodeImage" :show-menu-by-longpress="true"></image>
          </view>
        </view>
      </view>
    </view>
    <tabbar />
  </cl-page>
</template>

<script lang="ts" setup>
  import { ref } from "vue";
  import { onReady, onShareAppMessage } from "@dcloudio/uni-app";
  import { useCool } from "/@/cool";
  import Tabbar from "./components/tabbar.vue";

  const { service, router } = useCool();
  const list = ref<Eps.InfoContractEntity[]>([{}, {}, {}]);

  onReady(() => {
    refresh();
  });

  // 获取联系信息
  function refresh() {
    service.info.contract.list({ order: "sortNum", sort: "desc" }).then((res) => {
      list.value = res;
    });
  }

  defineExpose({
    refresh,
  });

  onShareAppMessage(() => {
    return {
      title: "薇薇大码甄选",
      path: "/pages/index/home",
    };
  });
</script>

<style lang="scss" scoped>
  .contract-list {
    .contract-item {
      margin-bottom: 24rpx;
      background-color: #fff;

      .contract-info {
        display: flex;
        padding-top: 40rpx;
        padding-left: 20rpx;

        .label {
          margin-right: 20rpx;
          margin-bottom: 20rpx;
        }

        .txt,
        .image-wrapper {
          flex: 1;
        }

        .image {
          width: 300rpx;
          height: 300rpx;
          margin-left: 60rpx;
        }

        .txt {
          align-items: center;
          text-align: center;
          font-size: 36rpx;
        }
      }
    }
  }
</style>